<!--
 * @Description: 新增或编辑
 * @Author: Liu Zhiwang
 * @Date: 2021-04-13 17:05:40
 * @LastEditTime: 2021-06-08 19:12:27
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div>
    <base-dialog
      class="dialog_box"
      width="73%"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      @updateData="updateData"
      @close="afterCloseDialog"
      @open="beforeOpenDialog">
      <el-form
        ref="dataForm"
        :model="dialog.form"
        :rules="dialog.rules"
        :disabled="dialog.disabled"
        label-width="100px">
        <div>
          <fieldset>
            <legend>任务信息</legend>
            <div>
              <table style="">
                <tr style="width: 100%">
                  <td style="width: 10%">线路</td><td>行别</td><td>开始区站</td><td>开始支柱号</td><td>开始公里标</td><td>结束区站</td><td>结束支柱号</td><td>结束公里标</td><td>支柱总数</td>
                </tr><tr>
                  <td>{{ dialog.form.lineName }}</td> <td>{{ dialog.form.directionName }}</td><td>行别</td><td>行别</td><td>行别</td><td>行别</td><td>行别</td><td>行别</td><td>行别</td>
                </tr>

              </table>
              <!--         <el-table :data="dialog.form" border style="width: 100%">

              <el-table-column prop="lineName" label="线路" width="auto" />
              <el-table-column prop="directionName" label="行别" width="auto" />
              <el-table-column prop="startSiteName" label="开始区站" width="auto" />
              <el-table-column prop="beginPillarNum" label="开始支柱号" width="auto" />
              <el-table-column prop="startRoadMark" label="开始公里标" width="auto" />
              <el-table-column prop="endSiteName" label="结束区站" width="auto" />
              <el-table-column prop="endPillarNum" label="结束支柱号" width="auto" />
              <el-table-column prop="endRoadMark" label="结束公里标" width="auto" />
              <el-table-column prop="jobNum" label="支柱总数" width="auto" />
              <template slot="operations" slot-scope="{row, $index}">
                <el-button
                  size="mini"
                  class="td-btn-operation"
                  :disabled="row.listStatus==1 || row.listStatus==3"
                  @click.native="updateForm(row, $index)">任务信息</el-button>
              </template>
            </el-table>-->
            </div>
          </fieldset>
        </div>
        <div style="padding-top: 10px">
          <el-button type="primary" plain icon="el-icon-folder-add" @click="add()">保存</el-button>
          <el-button type="primary" plain @click="add()">一键分工</el-button>
          <el-button type="primary" plain @click="add()">添加</el-button>
          <el-button type="primary" plain @click="add()">下发</el-button>
          <!-- <el-table :data="deptList" stripe border style="width: 100%" size="mini">
            <el-table-column  type="index" label="序号" min-width="20" align="center"></el-table-column>

            <el-table-column label="印鉴名称" min-width="50" align="center">
              <template slot-scope="scope" >
                <el-form-item  :prop="'deptList.' + scope.$index + '.deptName'" >
                  <el-input  v-model="scope.row.deptName" size="small" :maxlength="30"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column   label="印鉴保管人部门"   align="center">
              <template slot-scope="scope">
                <el-form-item  :prop="'deptList.' + scope.$index + '.deptName'">
                  <el-input  v-model="scope.row.deptName" size="small" :maxlength="30" ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column   label="印鉴保管人职务"   align="center">
              <template slot-scope="scope">
                <el-form-item  :prop="'deptList.' + scope.$index + '.deptName'">
                  <el-input  v-model="scope.row.deptName" size="small"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column  label="印鉴保管人姓名"  align="center">
              <template slot-scope="scope">
                <el-form-item  :prop="'deptList.' + scope.$index + '.deptName'">
                  <el-input  v-model="scope.row.deptName" size="small"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column   label="更新时间"  align="center">
              <template slot-scope="scope">
                <el-form-item  :prop="'deptList.' + scope.$index + '.deptName'">
                  <el-date-picker v-model="scope.row.deptName" :disabled="true" type="date" size="small"></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column    label="更新者"   align="center">
              <template slot-scope="scope">
                <el-form-item  :prop="'deptList.' + scope.$index + '.deptName'">
                  <el-input  v-model="scope.row.deptName" size="small" :disabled="true"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="20">
              <template slot-scope="scope">
                <el-button  type="text"  @click="delSealRow(scope.row,scope.$index)" icon="el-icon-delete" size="small"></el-button>
              </template>
            </el-table-column>
          </el-table>-->

        </div>
        <div class="page-box">
          <pagination
            :total="tableData.total"
            :page.sync="listQuery.page"
            :size.sync="listQuery.size"
            @pagination="changePageOption" />
        </div>
      </el-form>
    </base-dialog>
  </div>
</template>
<script>
import { findAllUnitDeptList } from '@/api/platform'
import {
  getStates,
  getListPage,
  getTypeListPage,
  getDeptTree,
  getById
} from '@/api/cms/equipment/divceAttr/index'
export default {
  components: {},
  props: {
    dialog: {
      type: Object,
      form: {},
      default() {
        return {
        }
      }
    }
  },
  data() {
    return {
      // 查询列表请求参数
      listQuery: {
        page: 1,
        size: 20,
        sysId: '',
        typeNo: '002'
      },
      // eslint-disable-next-line vue/no-dupe-keys
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        dataList: {
          lineList: []
        },
        form: {
          deptList: [], // 使用单位数组
          states: [], // 状态数组
          producerList: [], // 厂家数组
          deptAttr: {}, // 存放位置数组
          typeList: [], // 分类数组
          depts: [], // 分类数组
          sysList: [], // 存放位置数组
          divceTypeList: [] // 固组数组
        }
      },
      deptList: [],
      states: [],
      producerList: [],
      sysList: [],
      depts: [],
      isReloadData: true,
      typeList: [],
      divceTypeList: [],
      tableData: {
        total: 0
      },
      filterData: {
        sysId: {
          key: 'sysId',
          type: 'selectTree',
          title: '部门',
          placeholder: '所有部门',
          options: [],
          props: {
            label: 'label',
            value: 'id',
            parent: 'parentId',
            children: 'children'
          }
        }
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime()
        }
      }
    }
  },
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.getList()
      }
    }
  },
  methods: {
    // 获取下拉数据、字典
    getList() {
      // 获取单位 getStates
      findAllUnitDeptList({}).then(response => {
        this.deptList = Object.freeze(response.data)
        console.log(this.dialog)
        this.divceTypeList = Object.freeze(response.data)
        this.sysList = Object.freeze(response.data)
      })
      // 获取状态
      getStates({}).then(response => {
        this.states = Object.freeze(response.data)
      })
      // 获取分类
      getTypeListPage(this.listQuery).then(response => {
        this.typeList = Object.freeze(response.data)
      })

      /* // 获取厂家
      getListPage(this.selectTableModelLevel.filterForm).then(response => {
        this.producerList = Object.freeze(response.data) getDeptTree
      })*/
      this.getListPageCategory()
      // 获取部门树
      getDeptTree(this.listQuery).then(response => {
        this.depts = Object.freeze(response.data)
        this.filterData['sysId'].options = Object.freeze(response.data)
      })
    },
    changeDept(vm, node) {
      /* this.dialog.form.deptAttr = Object.assign({}, this.dialog.form.deptAttr, {
        sysId: node.id,
        sysname: node.label,
        deptCode: node.obj.deptCode
      })
      */
      this.dialog.form.sysId = node.code
      this.dialog.form.sysname = node.label
    },
    // 改变分页配置
    changePageOption(data) {
      this.listQuery.page = data.page
      this.listQuery.size = data.size
      this.getListPage()
    },
    clearDept() {
      this.dialog.form.deptAttr = {}
    },
    // 回调方法
    updateData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.dialog.loading = true
          this.$emit('updateData', this.dialog.form)
        }
      })
    },

    // 初始化
    beforeOpenDialog() {
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    // 初始化
    afterCloseDialog() {
      this.dialog.form = []
    },
    // 厂家下拉详情
    getListPageCategory() {
      this.$nextTick(_ => {
        this.producerList = []
        this.selectTableModelLevel.total = 0
        this.selectTableModelLevel.filterForm = Object.assign({}, this.selectTableModelLevel.filterForm, {
          page: 1,
          size: 10,
          eqtName: ''
        })
        getListPage(this.selectTableModelLevel.filterForm)
          .then((response) => {
            this.producerList = response.data.records
            this.selectTableModelLevel.total = response.data.total
          })
      })
    },
    changeTableProducer(row) {
      var tempData = this.dialog.form
      tempData.producerId = row.id
      tempData.contacts = row.contacts
      tempData.contactsPhone = row.contactsPhone
      tempData.producerName = row.eqtName
      this.isReloadData = false
      this.$nextTick(() => {
        this.isReloadData = true
      })
    },
    add() {
      alert('保存成功')
    },
    changeTypeList(row) {
      getById(row).then((response) => {
        this.dialog.form.divceName = response.data.typeName
        this.$forceUpdate()
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .site-dialog {
    .form-table{
      .form-table-head{
        padding: 0 30px;
      }
      .form-table-body{
        height: auto;
        // height: calc(80vh - 215px);
        padding: 0 30px;
        overflow-y: auto;
        position: relative;
      }
      .lineSiteOperate {
        padding: 0px;
      }
      .form-table-row{
        display: flex;
        margin-bottom: 15px;
        .form-table-col{
          text-align: center;
          padding: 5px 5px 0;
          &.is-required::before {
            content: "*";
            width: 5px;
            height: 5px;
            margin-right: 5px;
            color: red;
          }
        }
        .operate {
          display: flex;
          align-items: center;
        }
        .el-form-item{
          margin-bottom: 0;
        }
      }
      .list-transition-leave-active{
        width: calc(100% - 60px);
      }
      .form-table-add{
        display: inline-block;
        width: 50px;
        margin-left: 30px;
        text-align: center;
        .el-icon-plus{
          font-size: 26px;
        }
      }
    }
  }
  .no-validate-icon{
    .el-input__validateIcon {
      display: none;
    }
  }
  .dialog-body-fieldset{
    .el-form-item {
      margin-bottom: 15px;
    }
    .el-form-item__error{
      padding-top: 2px;
    }
    fieldset {
      border: 1px solid lightgray;
      border-radius: 5px;
      margin-bottom: 15px;
      .el-icon-circle-plus, .el-icon-remove, .delete-icon{
        cursor: pointer;
      }
      legend{
        font-size: 16px;
        color: #409eff;
        font-weight: bold;
      }
      fieldset {
        border: 1px dashed lightgray;
        margin-bottom: 0px;
        padding: 0;
        legend{
          color: #57bb1a;
          text-align: center;
        }
      }
    }
  }
</style>
